<template>
  <!-- transition组件需要子元素有一个根标签 -->
  <div>
    <!-- 
      SaveOrUpdateAttr 需要禁用
      AttrList 不禁用

        isShowAttrList: true -> 此时显示的是AttrList组件 -> 不禁用，希望得到false
        isShowAttrList: false -> 此时显示的是SaveOrUpdateAttr组件 -> 禁用，希望得到true
     -->
    <CategorySelector :disabled="!isShowAttrList" />
    <!-- 
      v-if / v-show

      父 -> 子 props
      子 -> 父 自定义事件
      父 <-> 子 v-model
      其他 pinia

      $event 代表事件回调函数的第一个参数（触发事件传递的第一个参数）
    -->
    <AttrList
      v-if="isShowAttrList"
      @setIsShowAttrList="isShowAttrList = $event"
      @setAttr="attr = $event"
    />
    <SaveOrUpdateAttr
      v-else
      @setIsShowAttrList="isShowAttrList = $event"
      :attr="attr"
    />
  </div>
</template>

<script lang="ts">
export default {
  name: "XAttr",
};
</script>

<script lang="ts" setup>
import { ref } from "vue";
import CategorySelector from "@/components/CategorySelector/index.vue";
import AttrList from "./components/AttrList.vue";
import SaveOrUpdateAttr from "./components/SaveOrUpdateAttr.vue";
import type { SaveAttrItem } from "@/api/product/model/attrModel";

// 是否显示AttrList
const isShowAttrList = ref(true);

const attr = ref<SaveAttrItem>({
  attrName: "",
  attrValueList: [],
});
</script>

<style scoped></style>
